<template>
    <div class="search">
        <van-nav-bar left-arrow @click-left="$router.go(-1)">
            <template #title>
                <van-search autofocus v-model="searchValue" placeholder="请输入搜索关键词"
                            shape="round" input-align="center"/>
            </template>
        </van-nav-bar>

        <div class="preparedFoods">
            <h2>热门搜索</h2>
            <div class="pre" @click="foodDetail(7)">冷饮</div>
            <div class="pre" @click="foodDetail(37)">火锅</div>
            <div class="pre" @click="foodDetail(21)">重庆小面</div>
            <div class="pre" @click="foodDetail(45)">东坡肉</div>
        </div>
        <div class="search-tips">
            <ul>
                <li v-for="(cur,index) in tipList" :key="index" @click="foodDetail(cur.food_id)">
                    {{cur.food_name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data(){
            return {
                searchValue:'',
                tipList:[],
            }
        },
        methods:{
            foodDetail(foodID){
                console.log(foodID);
                this.$router.push({
                    name:'FoodDetail',
                    params:{
                        food_id:foodID,
                    }
                });
            },
        },
        computed:{

        },
        watch:{
            searchValue(newValue){
                if(newValue!=''){
                    this.axios.post(this.GLOBAL.blurSearch,{food_name:newValue}).then(res=>{
                        console.log(res.data.foodList);
                        this.tipList=res.data.foodList;
                    });
                }else{
                    this.tipList=[];
                }
            }
        }
    }
</script>

<style lang="less">
    .search{
        .van-nav-bar__title{
            max-width: 80%;
            width: 75%;
        }
        .van-search{
            padding: 0;
        }
        .preparedFoods{
            position: absolute;
            z-index: -1;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            background-color: white;
            padding: 10px;
            .pre{
                border-radius: 14px;
                width: 5em;
                text-align: center;
                background-color: #F7F7F7;
            }
            h2:first-child{
                width: 100%;
                font-weight: normal;
            }
        }
        .search-tips{
            ul{
                padding-left: 10px;
                background-color: white;
                li{
                    border-top: 1px dashed rgba(128, 128, 128, 0.1);
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                }
            }
        }
    }
</style>